<div class="balances">
    <table>
        <tr>
            <th>Money</th>
            <td data-bind="text: '$' + format_number(game.money())"></td>
            <th>Per Click:</th>
            <td>
                <i class="icon-dollar"></i><span data-bind="text: format_number(game.indexed_buildings()['IT.1'].qty() * indexed_buildings()['IT.1'].get_multiplier('click', 'money') )"></span>
            </td>
            <th>Per Tick:</th>
            <td>
                <i class="icon-dollar"></i><span data-bind="text: format_number(game.indexed_buildings()['DB.1'].qty() * 10 * game.indexed_buildings()['DB.1'].get_multiplier('tick', 'money'))"></span>
            </td>
        </tr>
        <tr>


        </tr>
        <tr>
            <th>Bugs</th>
            <td>
                <i class="icon-bug"></i><span data-bind="text: format_number(game.bugs())"></span>
            </td>
            <th>Per Tick</th>
            <td>
                <i class="icon-bug"></i><span data-bind="text: format_number(game.indexed_buildings()['User.1'].qty() * 10 * game.indexed_buildings()['User.1'].get_multiplier('tick', 'money'))"></span>
            </td>
        </tr>
    </table>

<div class="button_holder">
    <button data-bind="
        click: function(data, eargs) {
            eargs.preventDefault();
            game.button_click();
        }
    ">
        Click For Money
    </button>
</div>
<div>
    (Help, stats, and more buttons at the bottom!)
</div>

<div class="building_list">
    <table>
        <thead>
            <tr>
            <!-- ko foreach: {
                data: game.kinds(),
                as: 'kind'
            } -->
            <th class="kind_label" data-bind="text: kind"></th>
            <!-- /ko -->
            </tr>
        </thead>
        <tbody>
        <!-- ko foreach: {
                data: game.tiers(),
                 as: 'tier'
             } -->
        <tr>
            <!-- ko foreach: {
                    data: _.map(game.kinds(), function(kind) { return game.indexed_buildings()[kind + '.' + tier] }),
                    as: 'bld'
                }-->
                <!-- ko if: bld -->
                <td class="building" data-bind="css: bld.css()">
                    <!-- ko template: {
                        name: LazyTemplate('kot/', 'building.html'),
                        data: bld,
                        as: 'bld'
                    }-->
                    <!-- /ko -->
                </td>
                <!-- /ko -->
                <!-- ko if: !bld -->
                <td>
                    <span>I really can't see this ever happening, but the original idea for this game was to auto-generate higher tiers, and I might someday go back to that.</span></td>

                <!-- /ko -->
            <!-- /ko -->

        </tr>
        <!-- /ko -->
    </tbody>
    </table>
</div>

<div class="help">
    <p>
        This is a loving <strike>tribute</strike> <strike>derivative</strike> second derivative of the definitive incremental Derivative Clicker.  It's also my first published game.
    </p>
    <ul>
        <li>The big theme here is that you must <strong>Integrate</strong> your staff into higher levels, consuming all lower levels to form fewer, higher tiered staff.</li>
        <li>The conversion rate scales fairly dramatically.</li>
        <li>Ticks are statically timed because warping time in the late game is needlessly complicated.  Instead, the QA line adds a bonus to the row.</li>
        <li>Each <strong>cell</strong> can be upgraded for a cost, stacking multiplicatively with the QA bonus.</li>
        <li>The Programmer line will automate your clicking for you.  He would also like you to know that the F12 button is broken.</li>
        <li>The game autosaves one second after each upgrade/integration, and every minute besides.</li>
        <li>Prestige will increase upgrade effectiveness, based on the highest tier you have reached in each line.</li>
        <li>I'm CRAZY nervous about releasing this.  Please please please please tell me how much you hate it on the reddit thread.</li>
    </ul>

</div>

<div class="stats">
    <table>
        <tr>
            <th>Total Clicks:</th>
            <th>Total Ticks:</th>
            <th>Upgrade Efficiency:</th>

        <tr>
        </tr>
            <td data-bind="text: game.total_clicks()"></td>
            <td data-bind="text: game.total_ticks()"></td>
            <td>
                <span data-bind="text: game.upgrade_effectiveness().toFixed(2)"></span>x
            </td>
        </tr>

    </table>
</div>


<div class="more_buttons">
    <div>
        <button data-bind="
            click: function(data, eargs) {
                eargs.preventDefault();
                game.save_game();
            },
        ">Save Game</button>
        <button data-bind="
            click: function(data, eargs) {
                eargs.preventDefault();
                game.new_game_plus();
            },
        ">Prestige</button>
    </div>
    <div>
        <!-- ko if: game.can_prestige() -->
        <span>
            Prestiging now will add <span data-bind="text: game.prestige_preview().toFixed(2)"></span>x to your upgrade effectiveness.
        </span>
        <!-- /ko -->
        <!-- ko if: !game.can_prestige() -->
        <span>
            You can't prestige until you've at least reached 4th tier in any line.
        </span>
        <!-- /ko -->
    </div>
    <div>
        <button class="wipe_save" data-bind="
            click: function(data, eargs) {
                eargs.preventDefault();
                console.log('wipe save?');
                game.wipe_save();
            }
        ">WIPE SAVE!!!</button>
    </div>
</div>
